<template>
  <div class="app-container">
    <el-form ref="passwordForm" :model="passwordForm" :rules="rules" label-width="120px" class="password">
      <el-row>
        <el-col :span="24">
          <el-form-item label="密码最小长度" prop="pwdMinLength">
            <el-input-number v-model="passwordForm.pwdMinLength" placeholder="请输入数字" :min="0" clearable style="width: 240px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="密码最大长度" prop="pwdMaxLength">
             <el-input-number v-model="passwordForm.pwdMaxLength" placeholder="请输入数字" :min="0" clearable style="width: 240px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="大写字符[A-Z]" prop="pwdUppercase">
            <el-select v-model="passwordForm.pwdUppercase" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="item in isContainsOption" :key="item.value" :label="item.label"
                         :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="小写字符[a-z]" prop="pwdLowercase">
            <el-select v-model="passwordForm.pwdLowercase" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="item in isContainsOption" :key="item.value" :label="item.label"
                         :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="数字[0-9]" prop="pwdNumber">
            <el-select v-model="passwordForm.pwdNumber" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="item in isContainsOption" :key="item.value" :label="item.label"
                         :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="特殊字符_!@#$" prop="pwdSpecial">
            <el-select v-model="passwordForm.pwdSpecial" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="item in isContainsOption" :key="item.value" :label="item.label"
                         :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
    </div>
  </div>
</template>

<script>
import {getpwdrule, savepwdrule} from "@/api/system/passwordConfiguration";

export default {
  name: "index",
  data() {
    return {
      passwordForm: {
        pwdMinLength: undefined,
        pwdMaxLength: undefined,
        pwdUppercase: undefined,
        pwdLowercase: undefined,
        pwdNumber: undefined,
        pwdSpecial: undefined
      },
      // 是否包含
      isContainsOption: [
        {value: 0, label: '不包含'},
        {value: 1, label: '包含'}
      ],
      // 表单校验
      rules: {
        pwdMinLength: [
          { required: true, message: "密码最小长度不能为空", trigger: "blur" },
        ],
        pwdMaxLength: [
          { required: true, message: "密码最大长度不能为空", trigger: "blur" },
        ],
        pwdUppercase: [
          { required: true, message: "是否包含大写字符不能为空" },
        ],
        pwdLowercase: [
          { required: true, message: "是否包含小写字符不能为空" },
        ],
        pwdNumber: [
          { required: true, message: "是否包含数字不能为空" },
        ],
        pwdSpecial: [
          { required: true, message: "是否包含特殊字符不能为空" },
        ],
      }
    }
  },
  created() {
    this.getPwdRule()
  },
  methods: {
    // 获取密码策略
    getPwdRule() {
      this.reset()
      getpwdrule().then(response=>{
        if (response.data != undefined) {
          this.passwordForm = response.data
        }
      })
    },
    // 重置表单
    reset() {
      this.passwordForm = {
        pwdMinLength: undefined,
        pwdMaxLength: undefined,
        pwdUppercase: undefined,
        pwdLowercase: undefined,
        pwdNumber: undefined,
        pwdSpecial: undefined
      }
    },
    // 保存
    submitForm() {
      this.$refs["passwordForm"].validate(valid => {
        if (valid) {
          savepwdrule(this.passwordForm).then(response => {
            this.$modal.msgSuccess("修改成功");
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.password {
  .el-col {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
